<template>
  <div class="m-app-container m-p-apply">
    <p>个人</p>
    <!-- 审核状态 -->
    <!-- <div class="m-status">
      <div class="m-status-img review"></div>
      <div class="m-result">
        <p class="status-tip">审核中，请等待...</p>
        <p>融资金额：<span class="c-main">20</span>W</p>
        <div>
          <p>原因：证件不全</p>
          <w-button type="main">去修改</w-button>
        </div>
      </div>
    </div> -->
    <!-- 填写信息 -->
    <w-form-validate @on-validate="onValidateConfirm">
      <div class="m-p-c">
        <div class="item">
          <span class="title">姓名</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|isName" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">手机号码</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|isMobile" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">身份证号</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|isId" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title" style="vertical-align: top;">身份证上传</span>
          <div class="a-input clearfix">
            <div class="fl">
              <w-upload type="string" :width="170" :height="110" bgimgtype="cardup" v-model="img"></w-upload>
            </div>
            <div class="fr">
              <w-upload type="string" :width="170" :height="110" bgimgtype="carddown" v-model="img"></w-upload>
            </div>
          </div>
        </div>
        <div class="item">
          <span class="title">家庭年收入</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|onlyMoney" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">家庭年消费</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|onlyMoney" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">是否有抵押</span>
          <div class="a-input">
            <w-select></w-select>
          </div>
        </div>
        <div class="item">
          <span class="title">抵押描述</span>
          <div class="a-input">
            <w-input holder="请填写"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">融资金额</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty|onlyMoney" error="必填|格式错误"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">融资期限</span>
          <div class="a-input">
            <w-datepicker></w-datepicker>
            <!-- <w-input holder="请填写" rule="isEmpty|onlyIntNull" error="必填|请输入大于0的纯数字"></w-input> -->
          </div>
        </div>
        <div class="item">
          <span class="title">融资描述</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty" error="必填"></w-input>
          </div>
        </div>
        <div class="item">
          <span class="title">从事行业</span>
          <div class="a-input">
            <w-input holder="请填写" rule="isEmpty" error="必填"></w-input>
          </div>
        </div>
      </div>
      <div class="btn-next">
        <button type="submit" class="btn main">提交</button>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: ''
    }
  },
  methods: {
    /**
     * 提交
     */
    onValidateConfirm() {
      this.$toast('提交成功，等待审核...', () => {
        this.$router.push('/my/financing')
      })
    }
  }
}
</script>

<style lang="scss">
.m-p-apply {
  .w-input .error-tip {
    width: 100%;
    left: 0;
    margin-top: 38px;
    text-align: left;
  }
  .select-drop {
    text-align: left;
  }
  .m-result {
    .btn {
      width: 80px;
      height: 30px;
    }
  }
  .btn-next {
    .btn {
      width: 140px;
      height: 50px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-p-apply {
  width: 100%;
  background-color: $color-white;
  margin: 30px auto; 
  padding: 20px;
}
.btn-next {
  text-align: right;
}
.m-p-c {    
  text-align: right;
  width: 40%;
  min-height: 500px;
  margin: 20px auto;
  .item {
    padding-bottom: 20px;
    &:last-child {
      padding-bottom: 0;
    }
    .title {
      font-size: 12px;
      text-align: right;
      padding-right: 20px;
    }
    .a-input {
      width: 360px;
      display: inline-block;
    }
  }
}
.m-status {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 30px auto 10px;
  .m-status-img {
    width:120px;
    height:90px;
    margin-right: 30px;
    display: inline-block;
    // 审核中
    &.review {
      background-image: url(../../assets/icon_review.png);
    }
    // 审核成功
    &.success {
      background-image: url(../../assets/icon_review1.png);
    }
    // 审核失败
    &.fail {
      background-image: url(../../assets/icon_review2.png);
    }
  }
  .m-result {
    text-align: left;
    p {
      line-height: 28px;
    }
  }
  .status-tip {
    color:rgba(50,50,50,1);
    background:linear-gradient(180deg, rgba(252,116,52,1) 0%, rgba(249,75,72,1) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
</style>
